<template>
  <div class="box" :style="style"></div>
  <button @click="onStep1">第一步</button>
  <button @click="onStep2">第二步</button>
</template>
<script>
import { mat2d, vec2 } from '../../libs/glmatrix/gl-matrix-min.js'
export default {
  data() {
    return {
      style: {}
    }
  },
  methods: {
    onStep1() {
      let m = mat2d.create()
      mat2d.translate(m, m, [100, 0])
      this.ms.push(m)
      //左上角移动
      this.buildStyle()
    },
    onStep2() {
      let m = mat2d.create()
      mat2d.rotate(m, m, Math.PI / 4)
      this.ms.push(m)
      this.buildStyle()
    },
    buildStyle(m) {
      let end = mat2d.create()
      this.ms.forEach((res) => {
        mat2d.mul(end, end, res)
      })

      this.style = {
        transform: `matrix(${end.join(',')})`
      }
    }
  },
  mounted() {
    this.ms = []
  }
}
</script>
<style lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: relative;
  &-page {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
  &-front {
    background: red;
  }
  &-back {
    background: blue;
  }
}
</style>
